<template>
  <div class="hotMachineState">
    <el-dialog :close-on-click-modal='false' v-drag :title="$t('热备状态异常排查表')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="800px" :close="close">
      <el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod">
        <el-table-column align='center' :label="$t('驱动类型')">
          <el-table-column align='center' prop="main" :label="$t('主模式')"></el-table-column>
          <el-table-column align='center' prop="prepare" :label="$t('备模式')"></el-table-column>
        </el-table-column>
        <el-table-column header-align='center' prop="abnormal" :label="$t('热备状态异常排查')" width="380px"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'StateDialog',
  data () {
    return {
      dialogVisible: false,
      tableData: [
        { main: 'MASTER', prepare: 'MASTER', abnormal: this.$t('检查心跳是否断开') },
        { main: 'BACKUP', prepare: 'BACKUP', abnormal: this.$t('检查主模式设备和备模式设备的路由模式热备口配置端口接线是不是断开') },
        { main: 'FAULT', prepare: 'FAULT', abnormal: this.$t('检查设备的路由模式热备口配置端口的接线是不是断开') }
      ]
    }
  },
  methods: {
    init () {
      this.dialogVisible = true
    },
    close () {
      this.dialogVisible = false
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 处理合计，[1,2]表示合并1行2列，[0,0]表示改行不显示
      if (columnIndex === 0 && rowIndex === 2) {
        return [1, 2]
      } else if (columnIndex === 1 && rowIndex === 2) {
        return [0, 0]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.hotMachineState {
  .colContent {
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 1px solid #999;
    // top: 1px;
    // left: 1px;
  }
}
</style>
